<template>
  <div class="wheat-report">
    <div class="action-bar">
      <div class="search-area">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索报告编号、样本编号或检测员"
          style="width: 300px;"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-select v-model="statusFilter" placeholder="报告状态" style="width: 120px; margin-left: 12px;">
          <el-option label="全部" value="" />
          <el-option label="已完成" value="completed" />
          <el-option label="审核中" value="reviewing" />
          <el-option label="待生成" value="pending" />
        </el-select>
      </div>
      
      <div class="action-buttons">
        <el-button type="primary" @click="generateReport">
          <el-icon><Document /></el-icon>
          生成报告
        </el-button>
        <el-button @click="batchExport">
          <el-icon><Download /></el-icon>
          批量导出
        </el-button>
      </div>
    </div>
    
    <el-table :data="filteredReports" style="width: 100%" v-loading="loading">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="报告编号" width="150" />
      <el-table-column prop="sampleId" label="样本编号" width="120" />
      <el-table-column prop="title" label="报告标题" min-width="200" />
      <el-table-column prop="inspector" label="检测员" width="100" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)" size="small">
            {{ getStatusLabel(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="quality" label="品质等级" width="100">
        <template #default="{ row }">
          <el-tag :type="getQualityType(row.quality)" size="small">
            {{ getQualityLabel(row.quality) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="160" />
      <el-table-column prop="updatedAt" label="更新时间" width="160" />
      <el-table-column label="操作" width="250" fixed="right">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="viewReport(row)">
            <el-icon><View /></el-icon>
            查看
          </el-button>
          <el-button type="text" size="small" @click="editReport(row)">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
          <el-button type="text" size="small" @click="downloadReport(row)">
            <el-icon><Download /></el-icon>
            下载
          </el-button>
          <el-button type="text" size="small" @click="deleteReport(row)">
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'WheatReport',
  setup() {
    const loading = ref(false)
    const searchKeyword = ref('')
    const statusFilter = ref('')
    const currentPage = ref(1)
    const pageSize = ref(20)
    const total = ref(0)
    
    const reports = ref([
      {
        id: 'RPT2024001',
        sampleId: 'WH2024001',
        title: '郑麦366品质检测报告',
        inspector: '张三',
        status: 'completed',
        quality: 'excellent',
        createdAt: '2024-06-20 10:30:00',
        updatedAt: '2024-06-20 14:20:00'
      },
      {
        id: 'RPT2024002',
        sampleId: 'WH2024002',
        title: '济麦22品质检测报告',
        inspector: '李四',
        status: 'reviewing',
        quality: 'good',
        createdAt: '2024-06-18 09:15:00',
        updatedAt: '2024-06-19 16:45:00'
      },
      {
        id: 'RPT2024003',
        sampleId: 'WH2024003',
        title: '石麦15品质检测报告',
        inspector: '王五',
        status: 'pending',
        quality: 'normal',
        createdAt: '2024-06-22 11:00:00',
        updatedAt: '2024-06-22 11:00:00'
      }
    ])
    
    const filteredReports = computed(() => {
      let filtered = reports.value
      
      if (searchKeyword.value) {
        filtered = filtered.filter(item => 
          item.id.includes(searchKeyword.value) ||
          item.sampleId.includes(searchKeyword.value) ||
          item.inspector.includes(searchKeyword.value)
        )
      }
      
      if (statusFilter.value) {
        filtered = filtered.filter(item => item.status === statusFilter.value)
      }
      
      return filtered
    })
    
    const getStatusType = (status) => {
      const types = {
        completed: 'success',
        reviewing: 'warning',
        pending: 'info'
      }
      return types[status] || 'info'
    }
    
    const getStatusLabel = (status) => {
      const labels = {
        completed: '已完成',
        reviewing: '审核中',
        pending: '待生成'
      }
      return labels[status] || '未知'
    }
    
    const getQualityType = (quality) => {
      const types = {
        excellent: 'success',
        good: 'primary',
        normal: 'warning',
        poor: 'danger'
      }
      return types[quality] || 'info'
    }
    
    const getQualityLabel = (quality) => {
      const labels = {
        excellent: '优质',
        good: '良好',
        normal: '一般',
        poor: '较差'
      }
      return labels[quality] || '未知'
    }
    
    const generateReport = () => {
      ElMessage.info('生成报告功能开发中...')
    }
    
    const batchExport = () => {
      ElMessage.info('批量导出功能开发中...')
    }
    
    const viewReport = (row) => {
      ElMessage.info('查看报告功能开发中...')
    }
    
    const editReport = (row) => {
      ElMessage.info('编辑报告功能开发中...')
    }
    
    const downloadReport = (row) => {
      ElMessage.success(`报告 ${row.id} 下载中...`)
    }
    
    const deleteReport = (row) => {
      ElMessageBox.confirm(
        `确定要删除报告 "${row.id}" 吗？`,
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        const index = reports.value.findIndex(item => item.id === row.id)
        if (index !== -1) {
          reports.value.splice(index, 1)
          ElMessage.success('报告删除成功')
        }
      }).catch(() => {})
    }
    
    return {
      loading,
      searchKeyword,
      statusFilter,
      currentPage,
      pageSize,
      total,
      filteredReports,
      getStatusType,
      getStatusLabel,
      getQualityType,
      getQualityLabel,
      generateReport,
      batchExport,
      viewReport,
      editReport,
      downloadReport,
      deleteReport
    }
  }
}
</script>

<style scoped>
.wheat-report {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-area {
  display: flex;
  align-items: center;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
